<template>
  <div>
    <el-form
      :model="registerForm"
      :rules="rules"
      ref="registerForm"
      class="registerContainer"
    >
      <h3 style="margin: 0px auto 40px auto; text-align: center">账号注册</h3>
      <el-form-item prop="username">
        <el-input
          type="text"
          auto-complete="off"
          placeholder="请输入用户名"
          v-model="registerForm.username"
        ></el-input>
      </el-form-item>
      <el-form-item prop="pass">
        <el-input
          type="password"
          placeholder="请输入密码"
          v-model="registerForm.userPassword"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item prop="checkPass">
        <el-input
          type="password"
          placeholder="再次确认密码"
          v-model="registerForm.checkPass"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item prop="code">
        <el-input
          type="text"
          auto-complete="off"
          v-model="registerForm.code"
          placeholder="点击图片更换验证码"
          style="width: 250px; margin-right: 5px"
        ></el-input>
        <img
          :src="captchaUrl"
          @click="updateCaptcha"
          class="el-form-item__content"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitRegister()">注册</el-button>
        <el-button @click="resetForm()" style="float:right">重置</el-button>
        <el-button @click="returnMenu()" style="float:right">去登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.registerForm.checkPass !== "") {
          this.$refs.registerForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.registerForm.userPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      captchaUrl: "/captcha?time=" + new Date(),
      registerForm: {
        username: "",
        userPassword: "",
        code: "",
      },
      rules: {
        username: [{ required: true, message: "请输入用户名哈", trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
    };
  },
  methods: {
    updateCaptcha() {
      this.captchaUrl = "/captcha?time=" + new Date();
    },
    submitRegister() {
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          this.postRequest("/register", this.registerForm).then((resp) => {
            if (resp) {
              //跳转登录页
              this.$router.replace("/");
            } else {
            }
          });
          this.captchaUrl = "/captcha?time=" + new Date();
        } else {
          this.$message.error("出现注册错了，阿西吧阿西吧！");
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.registerForm.resetFields();
    },
    returnMenu() {
      this.$router.replace("/");
    }
  },
};
</script>

<style>
.registerContainer {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 180px auto;
  width: 350px;
  padding: 15px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6cac6;
}
.el-form-item__content {
  display: flex;
  align-items: center;
}
</style>